<template>
	<view class="person_container">
		<div class="person_box">
			<div class="uopdate_avatar">
				<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1"></up-upload>
				<span>更换头像</span>
			</div>
			<div class="user_info">
				<up-form :rules="userRules" labelPosition="left" :model="userInfo" ref="uFormRef">
					<up-form-item labelWidth="70" label="用户名称" prop="name">
						<up-input v-model="userInfo.name" border="bottom"></up-input>
					</up-form-item>

					<up-form-item labelWidth="70" label="用户账号" prop="userName">
						<up-input v-model="userInfo.userName" border="bottom"></up-input>
					</up-form-item>

					<up-form-item labelWidth="70" label="手机号" prop="phone">
						<up-input v-model="userInfo.phone" border="bottom"></up-input>
					</up-form-item>

					<up-form-item labelWidth="70" label="性别" prop="gender">
						<up-radio-group v-model="userInfo.gender" placement="row">
							<up-radio label="男" name="1" :customStyle="{marginRight:'20rpx'}">

							</up-radio>
							<up-radio label="女" name="0">

							</up-radio>
						</up-radio-group>

					</up-form-item>
				</up-form>
			</div>
			<!-- 确认修改 -->
			<div class="edit_btn" @click="editUser">
				提交修改
			</div>
		</div>

		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		userRules
	} from "./rules.js"
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		base_user_avatar
	} from "@/config/index.js"
	import {
		apiUpdate,
		apiQueryUser
	} from "@/api/user.js"
	const uToastRef = ref(null)
	const uFormRef = ref(null)
	const userInfo = ref({
		empId: 0,
		name: '',
		userName: '',
		password: '',
		gender: '1',
		status: null,
		type: null,
		phone: '',
		avatar: '',
		communityId: null,

	})




	const fileList1 = ref([]);

	const editUser = async () => {
		uFormRef.value.validate().then(async (valid) => {
			if (valid) {
				await apiUpdate(userInfo.value);

				uToastRef.value.show({
					type: "success",
					title: '修改成功',
					message: "修改成功"
				})
				uni.setStorage({
					key: "empleyeeInfo",
					data: userInfo.value
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		}).catch(() => {
			// 处理验证错误  
			uToastRef.value.show({
				type: "none",
				title: '请填写表单内容',
				message: "请填写表单内容"
			})
		});


	}

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: JSON.parse(result.data).data,
			});
			userInfo.value.avatar = JSON.parse(result.data).data;
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://localhost:8099/common/uploadOss', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				success: (res) => {
					return resolve(res);
				},
			});
		});
	};



	onMounted(async () => {
		let res = await uni.getStorage({
			key: "empleyeeInfo"
		})
		let result = await apiQueryUser(res.data.empId)

		userInfo.value = result.data

		console.log(userInfo.value)
	})
</script>

<style lang="scss">
	.person_container {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: relative;

		.person_box {
			width: 100vw;
			// height: 500rpx;
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			background-color: #fff;

			.uopdate_avatar {
				padding-top: 40rpx;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			.user_info {
				margin-top: 100rpx;

			}
		}
	}

	.edit_btn {
		width: 90vw;
		border-radius: 20rpx;
		position: absolute;
		bottom: 200rpx;
		left: 50%;
		transform: translate(-50%, 0);
		height: 80rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #fff;
		background-color: #F5B017;
	}
</style>
